<template>
    <div class="header">
        <img src="@/assets/header/logo.svg">
        <div>
            <img class="avatar" :src="imageBaseUrl + store.getAvatar" v-show="isLogin" />
            <el-button type="primary" v-show="!isLogin" @click="router.push({ name: 'login' })">登录</el-button>
        </div>
    </div>
</template>

<script setup>
import router from '@/router';
import { useUserStore } from '@/stores/user'
import { computed, inject, onMounted} from 'vue';

const store = useUserStore()

const imageBaseUrl = inject('imageBaseUrl')

const isLogin = computed(() => {
    return store.getAvatar != ''
})

onMounted(() => {
    let avatar = sessionStorage.getItem('avatar')
    let username = sessionStorage.getItem('username')
    
    let user = {
        avatar,
        username
    }

    if(avatar != null && username != null){
        store.setUser(user)
    }
})
</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 20px;

    height: 35px;
}

.header .avatar{
    width: 40px;
    height: 40px;

    border-radius: 50%;
}
</style>